<template>
	<scroll-view scroll-y="true" class="content">
		<logoBar class="logoBar" @showPopup="showPopup" @toPersonal="toPersonal"></logoBar>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" indicator-active-color="#fff" indicator-color="#666">
			<swiper-item v-for="(item,index) in bannerList">
				<view class="swiper-item">
					<image :src="item.img" mode="aspectFill" @click="bannerClick(item.type,item.activityId)"></image>
				</view>
			</swiper-item>
		</swiper>
		<remindBar :content="notify.title" :id="notify.id" @goTo="goTo(arguments)"></remindBar>
		<mainMenu :list="mainMenuList"></mainMenu>
		<secTitle class="secTitle" title="展览" color="#B9AC90" :showMore="true" type="show" @goTo="goTo(arguments)">
		</secTitle>
		<scroll-view scroll-x="true" class="row">
			<show class="row-item" v-for="(item,index) in showList" :id="item.id" :img="item.img" :title="item.title"
				@goTo="goTo(arguments)" :style="index==showList.length-1?'margin-right: 20rpx;':''"></show>
			<!-- <show class="row-item" :id="1" img="../../static/exhibition_img16@2x.png" title="历史厅——天下盐城"
				@goTo="goTo(arguments)"></show>
			<show class="row-item" :id="2" img="../../static/exhibition_img18@2x.png" title="生态厅——水之韵"
				@goTo="goTo(arguments)"></show>
			<show class="row-item" :id="3" img="../../static/exhibition_img17@2x.png" title="非遗民俗厅——海之魅"
				@goTo="goTo(arguments)"></show>
			<show class="row-item" :id="4" img="../../static/exhibition_img19@2x.png" title="当代盐城厅——盐之翼"
				@goTo="goTo(arguments)"></show>
			<show class="row-item" :id="5" img="../../static/exhibition_img20@2x.png" title="别有洞天"
				@goTo="goTo(arguments)"></show> -->
		</scroll-view>
		<secTitle class="secTitle" title="活动" color="#B9AC90" :showMore="true" type="activity" @goTo="goTo(arguments)">
		</secTitle>
		<activity v-for="(item,index) in actList" @goTo="goTo(arguments)" :id="item.id" :img="item.img"
			:title="item.title" :dateString="item.startDate" :location="item.location" :showStatus="true"
			:state="item.state" :style="index==actList.length-1?'margin-bottom: 40rpx;':''">
		</activity>
		<!-- <activity :id="1" @goTo="goTo(arguments)" :img="'../../static/石墨镌华——铜镜拓印体验   16 9.jpg'" :title="'石墨镌华——铜镜拓印体验'"
			:dateString="'2021年8月21日'" :location="'盐城市博物馆'">
		</activity> -->
		<!-- <activity :id="2" @goTo="goTo(arguments)" :img="'../../static/熏香染袂   16 9.jpg'" :title="'熏香染袂—香纂、香丸制作'"
			:dateString="'2021年8月21日'" :location="'盐城市博物馆'">
		</activity>
		<activity :id="3" @goTo="goTo(arguments)" :img="'../../static/操缦遗音—古琴展演及体验   16 9.jpg'" :title="'操缦遗音—古琴展演及体验'"
			:dateString="'2021年8月21日'" :location="'盐城市博物馆'">
		</activity>
		<activity :id="4" @goTo="goTo(arguments)" :img="'../../static/青瓯瀹茗—宋式点茶、斗茶     16 9.jpg'"
			:title="'青瓯瀹茗——宋式点茶、斗茶'" :dateString="'2021年8月21日'" :location="'盐城市博物馆'">
		</activity>
		<activity :id="5" @goTo="goTo(arguments)" :img="'../../static/子慕予裳   16 9.jpg'" :title="'子慕予裳——汉服体验'"
			:dateString="'2021年8月21日'" :location="'盐城市博物馆'">
		</activity>
		<activity :id="6" @goTo="goTo(arguments)" :img="'../../static/美人云鬓——花簪制作     16 9.jpg'" :title="'美人云鬓——花簪制作'"
			:dateString="'2021年8月21日'" :location="'盐城市博物馆'">
		</activity> -->
		<cover-view class="popup" v-if="isPopup" @click="isPopup=false" @touchmove.stop.prevent="moveHandle">
			<mainMenu class="menu" :list="popupMenuList"></mainMenu>
		</cover-view>
	</scroll-view>
</template>

<script>
	import {
		getCode
	} from '../../js_sdk/utils.js'
	import {
		hostPage,
		doGet,
		doPostForm
	} from '../../js_sdk/request-helper.js'
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	import logoBar from '../customer/logoBar.vue'
	import remindBar from '../customer/remindBar.vue'
	import secTitle from '../customer/secTitle.vue'
	import mainMenu from '../customer/mainMenu.vue'
	import show from '../customer/show.vue'
	import activity from '../customer/activity.vue'
	export default {
		components: {
			logoBar,
			remindBar,
			secTitle,
			mainMenu,
			show,
			activity
		},
		data() {
			return {
				isPopup: false,
				bannerList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,

				remindInfomation: "我是提示信息，我是提示信息，我是提示信息，我是提示信息。",

				secTitle: "标题",
				secTitleColor: "#B9AC90",


				actList: [],
				showList: [],
				notify: {},

				mainMenuList: [{
						name: "导览讲解",
						page: "introduction",
						icon: "../../static/home_icon_guided@2x.png",
						bgColor: "#b9ac90"
					},
					{
						name: "预约",
						page: "order",
						icon: "../../static/home_icon_reservation@2x.png",
						bgColor: "#b9ac90"
					},
					{
						name: "资讯",
						page: "notification",
						icon: "../../static/home_icon_news@2x.png",
						bgColor: "#b9ac90"
					},
					{
						name: "展览",
						page: "show",
						icon: "../../static/home_icon_exhibition@2x.png",
						bgColor: "#b9ac90"
					},
					{
						name: "虚拟展览",
						page: "",
						icon: "../../static/home_icon_virtualexhibition@2x.png",
						bgColor: "#b9ac90"
					},
					{
						name: "活动",
						page: "activity",
						icon: "../../static/home_icon_activity@2x.png",
						bgColor: "#b9ac90"
					},
					{
						name: "互动",
						page: "guide",
						icon: "../../static/home_icon_interactive@2x.png",
						bgColor: "#b9ac90"
					},
					{
						name: "志愿者之家",
						page: "volunteer",
						icon: "../../static/home_icon_volunteer@2x.png",
						bgColor: "#b9ac90"
					},
				],
				popupMenuList: [{
						name: "首页",
						page: "index",
						icon: "../../static/home_icon_home@2x.png",
						bgColor: "#b9ac90"
					},
					{
						name: "个人中心",
						page: "mine",
						icon: "../../static/home_icon_my@2x.png",
						bgColor: "#b9ac90"
					},
				]
			}
		},
		onLoad() {
			let code = getCode(hostPage)
			if (code) {
				this.wxLogin(code)
				this.getList()
			}
		},
		methods: {
			wxLogin(code) {
				doGet('/blade-museum/user/wxLogin?code=' + code +
					'&museumId=' + uni.getStorageSync('museumId'), (res) => {
						uni.setStorageSync('userInfo', res)
					}, (err) => {
						uni.showToast({
							icon: 'error',
							title: err
						})
					})
			},
			getList() {
				doGet('/blade-museum/act/home?museumId=' + uni.getStorageSync('museumId'), (res) => {
					let bannerList = []
					for (let item of res.banner) {
						if (item.typeCode == 3) {
							item.type = 'activity'
						} else {
							item.type = 'showInfo'
						}
						bannerList.push(item)
					}
					this.bannerList = bannerList

					this.notify = res.notify

					let showList = []
					for (let item of res.show) {
						showList.push(item)
					}
					this.showList = showList

					let actList = []
					for (let item of res.activity) {
						item.startDate = dateToString(new Date(item.startTime.replace(/-/g, '/')), 'yyyy年MM月dd日')
						if (new Date().getTime() < new Date(item.startTime.replace(/-/g, '/')).getTime()) {
							item.state = 0
						} else if (new Date().getTime() < new Date(item.endTime.replace(/-/g, '/')).getTime()) {
							item.state = 1
						} else {
							item.state = 2
						}
						actList.push(item)
					}
					this.actList = actList
				}, (err) => {})
			},
			moveHandle() {

			},
			toPersonal() {
				if (uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: "../mine/mine"
					})
				} else {
					uni.navigateTo({
						url: "../login/login"
					})
				}
			},
			showPopup() {
				this.isPopup = true
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			bannerClick(type, id) {
				if (type == 'activity') {
					uni.navigateTo({
						url: "../activity/activityInfomation?id=" + id
					})
				}
			},
			goTo(e) {
				if (typeof e == 'object') {
					if (e[0] == 'notification') {
						uni.navigateTo({
							url: "../notification/notification"
						})
					} else if (e[0] == 'notificationInfo') {
						uni.navigateTo({
							url: "../notification/notificationInfo?id=" + e[1]
						})
					} else if (e[0] == 'activity') {
						uni.navigateTo({
							url: "../activity/activityList"
						})
					} else if (e[0] == 'activityInfo') {
						uni.navigateTo({
							url: "../activity/activityInfomation?id=" + e[1]
						})
					} else if (e[0] == 'show') {
						uni.navigateTo({
							url: "../show/showList"
						})
					} else if (e[0] == 'showInfo') {
						uni.navigateTo({
							url: "../show/showInfo?id=" + e[1]
						})
					} else if (e[0] == 'volunteer') {
						uni.navigateTo({
							url: "../volunteer/volunteer"
						})
					}
				}
			}
		}
	}
</script>

<style>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		width: 100%;
		height: auto;
		background: #fff;
	}

	.logoBar {
		/* height: 140rpx; */
	}

	.swiper {
		/* margin: 10rpx 0; */
		height: 420rpx;
		width: 100%;
	}

	.swiper-item {
		display: block;
		width: 100%;
		/* height: auto; */
		height: 100%;
		text-align: center;
		/* border-radius: 15rpx; */
	}

	.swiper-item image {
		height: 100%;
		width: 100%;
		/* width: calc(100% - 40rpx); */
		/* border-radius: 15rpx; */
	}

	.secTitle {
		margin-top: 10rpx;
		width: calc(100% - 40rpx);
		margin: 10rpx 20rpx 0 20rpx;
	}

	.row {
		/* background: #fff; */
		height: 320rpx;
		white-space: nowrap;
		width: 100%;
	}

	/* .row::-webkit-scrollbar {
		display: none;
	} */

	.row-item {
		display: inline-block;
		height: 100%;
		width: 360rpx;
	}

	.popup {
		width: 100%;
		height: 100%;
		/* background: #00000066; */
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.popup .menu {
		position: absolute;
		top: 140rpx;
		background: #ffffffee;
	}
</style>
